<template>
  <div class="siderBar" id="main" style="width: 800px; height: 800px"></div>
</template>

<script>
export default {
  name: "wordcloud",
  data() {
    return {
      wordclouds: [],
      myChart: "",
    };
  },
  methods: {
    wordcloud() {
      var data = {
        value: this.wordclouds,
        //小鸟图片
        image:
          "",
      };
      var myChart = echarts3.init(document.getElementById("main"));
      this.myChart = myChart;
      //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容  iconfont上面的图标可以
      var maskImage = new Image();
      maskImage.src = data.image;

      maskImage.onload = function () {
        myChart.setOption({
          tooltip: {
            show: false,
          },
          series: [
            {
              type: "wordCloud",
              gridSize: 1,
              sizeRange: [30, 80],
              rotationRange: [0, 0, 0, 0],
              maskImage: maskImage,
              textStyle: {
                normal: {
                  color: "#D3BE71",
                  fontFamily: "华文行楷", // 设置字体样式，替换为你希望使用的字体名称
                },
              },
              left: "center",
              top: "center",
              // width: '96%',
              // height: '100%',
              right: null,
              bottom: null,
              width: 710,
              height: 450,
              // top: 20,
              data: data.value,
            },
          ],
        });
      };
    },
    pop(wordcloud) {
      this.$nextTick(function () {
        this.wordclouds = wordcloud;
        this.myChart.dispose();
        this.wordcloud();
      });
    },
  },

  mounted() {
    this.wordcloud();
  },
};
</script>

<style>
.cloudtext {
  text-shadow: 0 0 10px red, 0 0 20px red, 0 0 30px red, 0 0 40px red;
}
</style>
